﻿<template>
    <full-screen-dialog
        :title="titleMap[mode]"
        v-model="visible"
        :width="1300"
        destroy-on-close
        :close-on-click-modal="false"
        :before-close="handleBeforeClose"
    >
        <el-form
            :model="entityObj"
            :rules="rules"
            :disabled="mode == 'Show'"
            ref="dialogForm"
            label-width="100px"
        >
            <el-row>
                <el-col :span="6">
                    <el-form-item label-width="110px" label="供应商编码">{{ entityObj.supplierCode }}</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label-width="110px" label="供应商名称">{{ entityObj.supplierName }}</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label-width="110px" label="联系人">{{ entityObj.realName }}</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label-width="110px" label="联系电话">{{ entityObj.mobile }}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label-width="110px" label="还货供应商" prop="backGoodsSuppliers">
                        <el-button size="small" @click="addSupplier()">新增供应商</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="110px">
                        <el-table
                            :data="entityObj.suppliers"
                            border
                            style="width: 100%"
                            show-summary
                        >
                            <el-table-column label="供应商编号" width="110">
                                <template #default="scope">{{scope.row.supplierCode}}</template>
                            </el-table-column>
                            <el-table-column label="供应商名称" width="260">
                                <template #default="scope">{{scope.row.supplierName}}</template>
                            </el-table-column>
                            <el-table-column label="联系人" width="130">
                                <template #default="scope">{{scope.row.realName}}</template>
                            </el-table-column>
                            <el-table-column label="手机号" width="130">
                                <template #default="scope">{{scope.row.mobile}}</template>
                            </el-table-column>
                            <el-table-column label="地址" min-width="200">
                                <template #default="scope">{{scope.row.address}}</template>
                            </el-table-column>
                            <el-table-column label="操作" width="80">
                                <template #default="scope">
                                    <el-button
                                        size="small"
                                        @click="deleteRow(scope.$index, scope.row)"
                                    >移除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="handleBeforeClose">取 消</el-button>
            <el-button
                v-if="mode != 'show'"
                type="primary"
                :loading="isSaveing"
                @click="submit(4)"
            >保 存</el-button>
        </template>

        <template>
            <el-dialog
                v-model="supplierState"
                title="选择供应商"
                :width="1300"
                :center="true"
                append-to-body
            >
                <el-row>
                    <sc-supplier-choice ref="scSupplierChoice" ></sc-supplier-choice>
                </el-row>
                <div style="margin-bottom:30px ;"></div>
                <template #footer>
                    <el-button @click="supplierState = false">取 消</el-button>
                    <el-button type="primary" :loading="isSaveing" @click="setSupplierChoice">确定</el-button>
                </template>
            </el-dialog>
        </template>
    </full-screen-dialog>
</template>



<script>
import tool from "@/utils/tool";
export default {
    emits: ["success", "closed"],
    data() {
        return {
            mode: "Add",
            titleMap: {
                Add: "新增",
                Edit: "设置配送供应商",
                Show: "查看",
            },
            entityObj: {
                supplierIds:[],
                suppliers: [],
            },
            supplierState: false,
            applyOrderState: false,
            storeState: false,
            queryList: {},
            visible: false,
            isSaveing: false,
            needSaveFlag: false,
            //验证规则
            rules: {},
            props: {
                label: "supplierName",
                value: "supplierId",
            },
            materialProps: {
                label: "materialCode",
                value: "materialId",
                items: "materialItems",
            },
            materialTypeTree: [],
            optionsBrand: [],
            optionsUnit: [],
            optionsPurchaseUnity: [],
            itemsData: [],
        };
    },
    computed: {
        totalAmount() {
            let materialFee = 0;
            this.entityObj.applyOrderItems.map((p) => {
                p.totalAmount =
                    (p.materialItems.find(
                        (t) => t.materialItemId == p.materialItemId
                    )?.price ?? 0) * p.qty;
                materialFee += p.totalAmount;
            });
            console.log(materialFee);

            const totalAmount = materialFee + this.entityObj.otherFee;
            return totalAmount;
        },
    },
    methods: {
        //显示=
        async open(mode = "Add") {
            this.mode = mode;
            this.visible = true;
            return this;
        },
        //表单提交方法
        submit(status) {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
                    try {
                        this.entityObj.supplierIds=[];
                        this.entityObj.suppliers.map(p=>{
                            this.entityObj.supplierIds.push(p.supplierId);
                        });
                        var returnValue =
                            await this.$API.auth.PostProcessApi.post(
                                "supplier/save-back-suppliers",
                                { ...this.entityObj }
                            );
                        if (returnValue.status == 200) {
                            this.$message.success("操作成功");
                            this.$emit("fatherMethod");
                            this.isSaveing = false;
                            this.visible = false;
                        } else {
                            this.$message.error("操作失败:" + returnValue.msg);
                            this.isSaveing = false;
                        }
                    } catch (error) {
                        this.loading = false;
                        this.isSaveing = false;
                        return false;
                    }
                }
            });
        },
        //表单注入数据
        async setData(data) {
            this.entityObj={...data};
            const returnValue = await this.$API.auth.GetProcessApi.get(
                `supplier/${data.supplierId}/back-suppliers`,{}
            );
            if (returnValue.status == 200) { 
                this.entityObj.suppliers = returnValue.response;
            }
            console.log(this.entityObj)
        },
        addSupplier() {
            this.supplierState = true;
            this.$nextTick(() => {
                this.$refs.scSupplierChoice.opBindData();
            });
        },
        deleteRow(index) {
            this.entityObj.suppliers.splice(index, 1);
        },
        setSupplierChoice() {
            let suppliers = this.$refs.scSupplierChoice.selectionRows;
            suppliers.map((p) => {
                if (
                    !this.entityObj.suppliers.some(
                        (t) => t.supplierId == p.supplierId
                    )
                ) {
                    this.entityObj.suppliers.push({
                        supplierId: p.supplierId,
                        supplierCode: p.supplierCode,
                        supplierName: p.supplierName,
                        realName: p.realName,
                        mobile: p.mobile,
                        address: p.address,
                    });
                }
            });
            this.supplierState = false;
        },
    },
    async mounted() {
    },
};
</script>

<style></style>
